<template>
	<view class="page-index">
		<view v-if="info.name">
			<view class="info-box">
				<view class="info">
					<view class="name">
						{{info.name}}
					</view>
					<view class="value">
						{{info.age}} ·{{info.date}}岁
					</view>
				</view>
				<image :src="info.head" @click="previewImage(0, null)"></image>
			</view>
			<view class="title">
				接单信息
			</view>
			<view class="intention-box">
				<view class="name" v-if="info.type_ids">
					{{info.type_ids.join()}}
				</view>
				<view class="value">
					{{info.salary}} {{info.areas_id}} {{info.type==1?'全职':'兼职'}}
				</view>
			</view>
			<view class="title" v-if="experience!=''">
				案例展示
			</view>
			<view class="experience-box" v-for="(item,index) in experience" :key="index">
				<view class="position">
					{{item.position}}
				</view>
				<view class="image-box" v-if="item.image_list">
					<image v-for="(itm,key) in item.image_list" :key="key" :src="itm" class="img"  @click="previewImage(key, item.image_list)"/>
				</view>
				<view class="txt">
					{{item.txt}}
				</view>
			</view>
			<view class="title" v-if="info.txt">
				自我描述
			</view>
			<view class="describe-box">
				{{info.txt}}
			</view>
			<view style="height: 300rpx">

			</view>
			<view class="fixed" v-if="userId!=info.id">
				<view class="fixed-box">
					<view class="share" @click="report()">
						<image src="/static/index/jubao.png" mode=""></image>
						<view>
							举报
						</view>
					</view>
					<view class="collection" @click="collect()">
						<image src="/static/index/position-sc.png" v-if="info.collect==0"></image>
						<image src="/static/index/position-sco.png" v-if="info.collect==1"></image>
						<view>
							收藏
						</view>
					</view>
					<view class="chat" @click="call()">
						拨打电话
					</view>
					<view class="call" @click="chat()">
						在线直聊
					</view>
				</view>
			</view>

		</view>
		<view class="empty" v-if="code==0">
			<empty :text='text'></empty>
			<view class="back" @click="back()">
				返回
			</view>
		</view>
		<!-- 弹窗 -->
		<view class="popup-box" v-if="popupShow">
			<view class="canvas" style="height: 70vh;margin-bottom: 4vh;">
				<view class="canvasmini" style="width: 90%;height: 90%;">
					<canvas style="height: 100%;width: 100%;" canvas-id="firstCanvas"></canvas>
				</view>
			</view>
		</view>
		<view class="share-box" v-if="popupShow">
			<view class="topbox">
				<!-- #ifndef APP-PLUS -->
				<view class="vxbox" v-if="!baocShow" @click="close()">
					<image class="vxbox-img" src="../../../static/vip/vx.png" mode=""></image>
					<view class="text">微信好友</view>
					<button open-type="share" class="bnt"></button>
				</view>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS -->
				<view class="vxbox" v-if="!baocShow" @click="closeAPP()">
					<image class="vxbox-img" src="../../../static/vip/vx.png" mode=""></image>
					<view class="text">微信好友</view>
				</view>
				<!-- #endif -->
				<view class="hbbox" v-if="!baocShow" @click="shengcBnt()">
					<image class="bcbox-img" src="../../../static/vip/sc.png" mode=""></image>
					<view class="text">生成海报</view>

				</view>
				<view class="hbboxss" v-if="baocShow" @click="xiazBnt()">
					<image class="bcbox-img" src="../../../static/vip/sc.png" mode=""></image>
					<view class="text">保存海报</view>

				</view>
			</view>
			<view class="close-box" @click="close()">
				取消
			</view>
		</view>
	</view>
</template>

<script>
	import * as index from '@/api/index.js'
	import * as user from '@/api/user.js'
	import empty from '@/components/empty/index.vue'
	var that
	export default {
		components: {
			empty
		},
		data() {
			return {
				userId: '',
				baocShow: false, //保存海报显示
				popupShow: false, //弹窗显示
				resume_id: '',
				info: {},
				experience: [], //案例展示
				educate: [], //教育经历
				widths: "", //图片列表动态宽度
				imgsrc: "", //保存图片的路径
				userdata: {}, //个人数据
				swiperList: [], //海报数组
				detail: '',
				width: '375',
				height: '563',
				share: '',
				code: 1,
				text: '接单已隐藏'
			}
		},
		onShow() {
			this.userId = uni.getStorageSync('userInfo').id.replace('p', '');
		},
		onShareAppMessage(res) {

			return {
				title: this.info.name, //分享标题
				imageUrl: '',
				path: '/pages/home/resumeInfo/index?resume_id=' + this.info.id
			}
		},
		onLoad(params) {
			this.resume_id = params.resume_id
			this.getResumeInfo()
			this.getResumeExperienceList()
			this.getResumeEducateList()
			that = this
			uni.getSystemInfo({
				success: function(res) {
					that.Width = res.windowWidth;
				}
			});
			//请求海报数据
			if (uni.getStorageSync('token')) {
				that.huizhihaibao()
				//链接goeazy
				let userInfo = uni.getStorageSync('userInfo')
				//链接im
				// return;
				if (this.goEasy.getConnectionStatus() == 'disconnected') {
					this.goEasy.connect({
						id: userInfo.id,
						data: {
							nickname: userInfo.name,
							avatar: userInfo.head
						},
						onSuccess: () => {
							this.latestConversations()
						},
						onFailed: (error) => {},
						onProgress: (attempts) => {}
					});
				}
			}

		},
		methods: {
			huizhihaibao() {
				//数据请求结束
				uni.showLoading({
					title: '加载中'
				});
				let that = this
				user.wxewm().then(res => {
					that.userdata = {
						img: res.data.qrcode //二维码
					}
					that.swiperList = [{
						posterImg: res.data.bgImage //背景图
					}, ]
					uni.downloadFile({
						url: that.userdata.img,
						success: function(res) {
							that.userdata.img = res.tempFilePath
						}
					})
				})
				uni.hideLoading();
				//数据请求结束
			},
			selseimg(e) { //绘制海报
				uni.showLoading({
					title: '生成海报中'
				});
				const context = uni.createCanvasContext('firstCanvas')
				uni.downloadFile({
					url: e,
					success: function(res) {
						context.drawImage(res.tempFilePath, 0, 0, that.Width, that.Height) //海报背景
					}
				})

				setTimeout(() => { //定时器，海报方法不能立即执行，等页面渲染完成
					context.drawImage(that.userdata.img, that.Width / 2 - 45, that.Height / 2 - 45, 90, 90) //二维码图片
					context.setFillStyle('#FFFFFF')
					context.setFontSize(14)
					context.save()
					context.beginPath()
					context.arc(44, 350, 25, 0, 2 * Math.PI)
					context.clip()
					context.restore()
					context.draw()
					uni.hideLoading();
					this.baocShow = true
				}, 2000);
			},
			// 生成海报
			shengcBnt() {
				setTimeout(res => {
					uni.createSelectorQuery().in(this).select('.canvasmini').boundingClientRect(data => {
						that.Height = data.height
						that.Width = data.width
					}).exec()
					this.selseimg(this.swiperList[0].posterImg)
				}, 500)
			},
			xiazBnt(e) { //保存海报
				uni.showLoading({
					title: '保存海报中'
				});
				console.log('保存');
				let tempRatio = 1.5;
				// #ifdef H5 || APP-PLUS
				tempRatio = 1;
				// #endif
				uni.canvasToTempFilePath({
					x: 0,
					y: 0,
					width: uni.upx2px(750), // 截取的画布的宽750
					height: uni.upx2px(1126), // 截取的画布的高1624
					destWidth: uni.upx2px(750), // 保存成的画布宽度750
					destHeight: uni.upx2px(1126), // 保存成的画布高度1624
					canvasId: 'firstCanvas',
					success: function(res) {
						uni.hideLoading()
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function(red) {
								uni.showToast({
									title: '保存相册成功'
								})
								that.imgsrc = res.tempFilePath
								if (e == 2) {
									console.log("自己写分享")
								}
							},
							fail(res) {
								if (res.errMsg == "saveImageToPhotosAlbum:fail auth deny") {
									uni.showModal({
										title: '您需要授权相册权限',
										success(res) {
											if (res.confirm) {
												uni.openSetting({
													success(res) {

													},
													fail(res) {
														console.log(res)
													}
												})
											}
										}
									})
								}
							}
						});
					},
					fail(res) {
						uni.hideLoading()
					}
				}, this)
			},
			close() {
				this.popupShow = false //弹窗显示
				this.baocShow = false
			},
			closeAPP() {
				uni.share({
					provider: 'weixin',
					scene: "WXSceneSession",
					type: 5,
					// imageUrl: this.share.image,
					imageUrl: 'https://xczp.wanhedashuju.com/uploads/20220107/125c54dad49a1c68b2796dd71128f698.png',
					title: '县城直聘',
					miniProgram: {
						id: 'gh_6b4bd9a933d2',
						path: '/pages/home/resumeInfo/index?resume_id=' + this.info.id,
						type: 0,
						webUrl: 'https://app.wanhedashuju.com/'
					},
					success: ret => {
						console.log(JSON.stringify(ret));
					}
				});
			},
			//举报
			report() {
				this.$tools.navigate('/pages/user/report/index?id=' + this.info.member_id)
			},
			// 分享按钮
			shareBnt() {
				if (uni.getStorageSync('token')) {
					this.popupShow = !this.popupShow
				} else {
					this.$tools.toast('请登录')
					setTimeout(() => {
						uni.reLaunch({
							url: '/pages/login/index'
						})
					}, 1000)
				}

			},
			//接单详情
			getResumeInfo() {
				index.getResumeInfo({
					resume_id: this.resume_id
				}).then(res => {
					if (res.data) {
						this.info = res.data
						this.code = res.code
					} else {
						this.text = res.msg
						this.code = 0
					}
				})
			},
			//案例展示
			getResumeExperienceList() {
				index.getResumeExperienceList({
					resume_id: this.resume_id
				}).then(res => {
					this.experience = res.data
				})
			},
			//教育经历
			getResumeEducateList() {
				index.getResumeEducateList({
					resume_id: this.resume_id
				}).then(res => {
					this.educate = res.data
				})
			},
			//拨打电话
			call() {
				console.log('aaaaa');
				index.memberGetResumeTel({
					resume_id: this.info.member_id
				}).then(res => {
					console.log(res.data.tel, '打电话');
					uni.makePhoneCall({
						phoneNumber: res.data.tel
					});
				})
			},
			//收藏
			collect() {
				index.memberCollectPosition({
					collect_id: this.info.member_id,
					type: 0
				}).then(res => {
					if (this.info.collect == 0) {
						this.$tools.succend('收藏成功!')
					} else {
						this.$tools.toast('取消收藏')
					}
					setTimeout(res => {
						this.getResumeInfo()
					}, 500)
				})
			},
			//预览图片
			previewImage(index, list) {
				let arr = list ? list : [this.info.head]
				uni.previewImage({
					urls: arr,
					current: index
				});
			},
			chat() {
				this.$tools.navigate(
					`/pages/news/chat/index?userId=${this.info.member_id}&&name=${this.info.name}&&id=${this.info.id}`)
			},
			back() {
				this.$tools.back(1)
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-index {
		.title {
			margin: 35rpx 0 16rpx;
			padding-left: 24rpx;
			font-size: 28rpx;
			font-weight: 700;
			color: #333333;
			border-left: 8rpx solid #FF6600;
		}

		.info-box {
			background: #ffffff;
			padding: 34rpx 36rpx;
			display: flex;
			justify-content: space-between;

			.info {
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.name {
					font-size: 36rpx;
					font-weight: 700;
					color: #333333;
				}

				.value {
					font-size: 26rpx;
					color: #333333;
					opacity: 0.65;
				}
			}

			image {
				width: 100rpx;
				height: 100rpx;
				flex-shrink: 0;
				border-radius: 50%;
			}
		}

		.intention-box {
			padding: 28rpx 36rpx;
			background: #ffffff;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.name {
				font-size: 28rpx;
				font-weight: bold;
				color: #333333;
			}

			.value {
				margin-top: 28rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
			}
		}

		.experience-box {
			background: #ffffff;
			padding: 33rpx 36rpx;
			
			.company {
				font-size: 24rpx;
				font-weight: bold;
				color: #333333;
			}

			.position {
				font-size: 28rpx;
				font-weight: 400;
				color: #333333;
			}
			.image-box {
				display: flex;
				align-items: center;
				justify-content: flex-start;
				margin-top: 10rpx;
				margin-bottom: 20rpx;
				.img {
					margin-right: 10rpx;
					width: 100rpx;
					height: 100rpx;
				}
			}
			.txt {
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
			}
		}

		.educate-box {
			background: #ffffff;
			padding: 33rpx 36rpx;

			.name {
				font-size: 24rpx;
				font-weight: bold;
				color: #333333;
			}

			.drving {
				margin-top: 17rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #333333;
			}

			.time {
				margin-top: 17rpx;
				font-size: 24rpx;
				font-weight: 400;
				color: #999999;
			}
		}

		.describe-box {
			padding: 36rpx;
			background: #ffffff;
			font-size: 22rpx;
			font-weight: 400;
			color: #333333;
			opacity: 0.6;
		}

		.fixed {
			// margin-left: -40rpx;
			position: fixed;
			bottom: 0;
			padding-bottom: env(safe-area-inset-bottom);
			background: #FFFFFF;
			width: 100%;

			.fixed-box {
				padding: 36rpx 40rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				image {
					width: 30rpx;
					height: 30rpx;
					margin-bottom: 10rpx;
				}

				.share {
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 24rpx;
					font-weight: 500;
					color: #333333;
				}

				.collection {
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 24rpx;
					font-weight: 500;
					color: #333333;
				}

				.chat {
					padding: 22rpx 49rpx;
					background: #41B6B5;
					border-radius: 15rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #FFFFFF;
				}

				.call {
					padding: 22rpx 49rpx;
					background: #FF6600;
					border-radius: 15rpx;
					font-size: 28rpx;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
		}
	}

	.empty {
		display: flex;
		flex-direction: column;
		align-items: center;

		.back {
			margin-top: 36rpx;
			width: 200rpx;
			text-align: center;
			padding: 16rpx 32rpx;
			border: 1rpx solid #999999;
			color: #999999;
			border-radius: 16rpx;
		}
	}

	.popup-box {
		background-color: rgba(173, 173, 173, 0.66);
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		min-height: 100vh;

		.imag-box {
			height: 60vh;
			width: 375px;
			margin-bottom: 4vh;
			// background: #FFFFFF;
			// image {
			// 	width: 95%;
			// 	height: 100%;
			// }
		}

		.canvas {
			display: flex;
			justify-content: center;
			align-items: center;

			.canvasmini {
				border-radius: 15rpx;
				overflow: hidden;
			}
		}
	}

	.share-box {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		height: 26vh;
		z-index: 9999999;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		background-color: #FFFFFF;

		.topbox {
			padding-top: 40rpx;
			display: flex;
			justify-content: center;
			padding-left: 40rpx;
			padding-right: 40rpx;

			.vxbox {
				width: 50%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				position: relative;

				.bnt {
					position: absolute;
					width: 100%;
					height: 100%;
					top: 0;
					left: 0;
					opacity: 0;
					z-index: 999;
				}

				.vxbox-img {
					width: 80rpx;
					height: 80rpx;
				}

				.text {
					margin-top: 12rpx;
				}
			}

			.hbbox {
				width: 50%;
				display: flex;
				flex-direction: column;
				align-items: center;

				.bcbox-img {
					width: 80rpx;
					height: 80rpx;
				}

				.text {
					margin-top: 12rpx;
				}
			}

			.hbboxss {
				width: 100%;
				display: flex;
				flex-direction: column;
				text-align: center;
				align-items: center;

				.bcbox-img {
					width: 80rpx;
					height: 80rpx;
				}

				.text {
					margin-top: 12rpx;
				}
			}
		}

		.close-box {
			margin-top: 20rpx;
			border-top: 2rpx solid #f5f5f5;
			padding: 30rpx 20rpx 0rpx 20rpx;
			text-align: center;
		}
	}
</style>
